<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>赋值</title>
</head>

<body>
    <div id="app">
        <!-- 显示 -->
        <h2>{{message}}</h2>
        <!-- 事件 -->
        <span v-bind:title="tips"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
        <!-- 条件判断 -->
        <p v-if="seen">现在你看到我了</p>

        <!-- 循环 -->
        <ul v-for="item in list">
            <li>{{item}}</li>
        </ul>

        <!-- 处理用户输入 -->
        <button v-on:click="reverseMessage">反转消息</button>
        <input v-model="message">

        <div>
            <!-- 创建一个 todo-item 组件的实例 -->
            <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
        </div>

    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 定义名为 todo-item 的新组件
        Vue.component('todo-item', {
            // todo-item 组件现在接受一个
            // "prop"，类似于一个自定义 attribute。
            // 这个 prop 名为 todo。
            props: ['todo'],
            template: '<li>{{ todo.text }}</li>'
        })

        const app = new Vue({
            el: '#app', //挂载
            data: {
                message: 'hello Vue',
                list: ['小新', '小东', '小宏', '小周'],
                tips: '页面加载于' + new Date().toLocaleString(),
                seen: true,
                groceryList: [{
                    id: 0,
                    text: '蔬菜'
                }, {
                    id: 1,
                    text: '奶酪'
                }, {
                    id: 2,
                    text: '随便其它什么人吃的东西'
                }]

            },
            methods: {
                reverseMessage: function() {
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>

</html>